<template>
  <view
    v-if="innerShow"
    class="weui-half-screen-dialog"
    :style="
      'border-color:rgb(64, 247, 94); border-style:solid; border-width:3px; position: fixed;  bottom:' +
      height +
      'px'
    "
  >
    <view class="weui-half-screen-dialog__hd">
      <text class="weui-half-screen-dialog__title">{{ title }}</text>
    </view>
    <view class="weui-half-screen-dialog__bd">
      <view class="weui-half-screen-dialog__tips">{{ desc1 }}</view>
      <view class="weui-half-screen-dialog__tips" style="color: blue" @tap="openPrivacyContract">{{
        urlTitle
      }}</view>
      <view class="weui-half-screen-dialog__tips">{{ desc2 }}</view>
    </view>
    <view class="weui-half-screen-dialog__ft">
      <view class="weui-half-screen-dialog__btn-area">
        <button id="disagree-btn" type="default" class="weui-btn" @tap="handleDisagree">
          不同意并退出
        </button>
        <button
          id="agree-btn"
          type="default"
          open-type="agreePrivacyAuthorization"
          class="weui-btn"
          @agreeprivacyauthorization="handleAgree"
        >
          同意并继续
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '用户隐私保护提示',
      desc1: '感谢您使用本游戏，您使用本游戏前应当阅井同意',
      urlTitle: '《用户隐私保护指引》',
      desc2:
        '当您点击同意并开始时用产品服务时，即表示你已理解并同息该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法进入游戏。',
      innerShow: false,
      height: 0,
    }
  },
  mounted() {
    this.attached()
  },
  methods: {
    attached() {
      if (uni.getPrivacySetting) {
        uni.getPrivacySetting({
          success: (res) => {
            console.log(
              '是否需要授权：',
              res.needAuthorization,
              '隐私协议的名称为：',
              res.privacyContractName
            )
            if (res.needAuthorization) {
              this.popUp()
            } else {
              this.$emit('agree')
            }
          },

          fail: () => {},
          complete: () => {},
        })
      } else {
        // 低版本基础库不支持 wx.getPrivacySetting 接口，隐私接口可以直接调用
        this.$emit('agree')
      }
    },
    handleDisagree(e) {
      this.$emit('disagree')
      this.disPopUp()
    },
    handleAgree(e) {
      this.$emit('agree')
      this.disPopUp()
    },
    popUp() {
      this.innerShow = true
    },
    disPopUp() {
      this.innerShow = false
    },
    openPrivacyContract() {
      uni.openPrivacyContract({
        success: (res) => {
          console.log('openPrivacyContract success')
        },
        fail: (res) => {
          console.error('openPrivacyContract fail', res)
        },
      })
    },
  },
  created: function () {},
}
</script>

<style>
.weui-btn {
  position: relative;
  display: block;
  width: 368rpx;
  margin-left: auto;
  margin-right: auto;
  padding: 16rpx 48rpx;
  box-sizing: border-box;
  font-weight: 700;
  font-size: 34rpx;
  text-align: center;
  text-decoration: none;
  color: #fff;
  line-height: 1.88235294;
  border-radius: 16rpx;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
  user-select: none;
}
.weui-btn:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--weui-BTN-ACTIVE-MASK);
  border-radius: 16rpx;
}
.weui-btn:not(.weui-btn_disabled):not(.weui-btn_loading):active:before,
.weui-btn:not([disabled]):not(.weui-btn_loading):active:before {
  content: '';
}
</style>
